<template>
    <div id="app">
        <div class="transfer-wrap" v-if="show">
            <h1 class="transfer-title">文件便利传输站</h1>
            <div class="transfer-box">
                <Download v-if="record.name" :data="record" @refresh="refresh"/>
                <Upload v-else :data="record"/>
            </div>
            <div class="transfer-footer">
                Copyright by 2022 SystemLight
            </div>
        </div>
    </div>
</template>

<script>
import qs from 'qs';

import { getTransferData, addTransferRecord } from '@/api';
import Upload from '@/components/Upload';
import Download from '@/components/Download';

export default {
    name: 'App',
    components: {
        Upload,
        Download
    },
    data() {
        return {
            uid: null,
            show: false,
            record: {}
        }
    },
    created() {
        this.checkRender();
    },
    methods: {
        checkRender() {
            const {uid} = qs.parse(location.search, {ignoreQueryPrefix: true});

            if (uid) {
                getTransferData(uid).then((record) => {
                    this.uid = uid;
                    this.record = record;
                    this.show = true;
                });
            } else {
                addTransferRecord();
            }
        },
        refresh() {
            getTransferData(this.uid).then((record) => {
                this.record = record;
            });
        }
    }
}
</script>

<style lang="scss">
.transfer-wrap {
    max-width: 576px;
    margin: 0 auto;
    padding: 15px;
    background: #F9F9F9;
    box-shadow: 2px 2px 5px #9C9B9B;

    .transfer-title {
        color: #84B1ED;
        padding-bottom: 15px;
        text-align: center
    }

    .transfer-box {
        min-height: 350px;
    }

    .transfer-footer {
        margin-top: 25px;
        text-align: center;
        color: rgba(0, 0, 0, .45);
        font-size: 14px;
    }
}
</style>
